<template>
  <div class="login-wrap">
    <el-form class="login-container" :rules="rules" :model="form" ref="form">
      <h1 class="title">PicoIdeal Cloud</h1>
      <el-form-item prop="userName">
        <el-input placeholder="用户名" v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="密码" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlelogin" style="width: 100%">登录</el-button>
      </el-form-item>
      <el-row style="text-align: center">
        <!-- <el-link type="primary" @click="toRegister()">用户注册</el-link> -->
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { setToken } from "@/utils/auth"
import { login } from "@/api/login";
export default {
  name: "loginView",
  data() {
    return {
      form: {
        userName: "",
        password: "",
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    handlelogin() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          login(this.form).then((res) => {
            this.$modal.msgSuccess("登录成功");
            setToken(res.msg);
            this.$router.push("/index");
          })
        }
      });
    },
    toRegister() {
      this.$router.push("/register");
    },
  },
};
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
  font-family: "Consolas";
}
</style>
